<template>
	<view class="rule-page flex-col align-center" >
		<top-navigation isShow isFix backIconColor='#FFF' isBack :custom='true' :customNum='100'>
			<template #center-slot>
					<x-card background="#FFFFFF00" color="#FFF" border="none" fontWeight="800">创建</x-card>
			</template>
		</top-navigation>
		<view class="flex-col align-center">
			<view class="" style="width: 100vw;">
				<x-card fontSize="30rpx" background="#000" color="#FFF" border="none">选择墓碑类型</x-card>
			</view>
			<view class="justify-start">
				<x-card fontSize="30rpx" background="#000" color="#FFF" :border="`1rpx solid ${type==1?'#FFF':'#000'}`"
					margin="0 10rpx 0 0" @tap="type=1">亲人</x-card>
				<x-card fontSize="30rpx" background="#000" color="#FFF" :border="`1rpx solid ${type==2?'#FFF':'#000'}`"
					@tap="type=2">宠物</x-card>
			</view>
			<view class="" style="width: 100vw;" v-if="type==1">
				<scroll-view style="width: 100vw;" scroll-x>
					<view class="justify-start">
						<view class="box flex-col align-center" v-for="(v,k) in 2" :key="k">
							<view class="box-item">
								<view class="tombstone">
									<image :src="`/grave/static/${2 - k}.jpeg`" mode="widthFix"></image>
									<view class="tomb">
										<!-- {{name}} 之墓 -->
									</view>
									<!-- <image src="/" mode=""></image> -->
								</view>
							</view>
							<x-card @tap="setText(2 - k)" fontSize="30rpx" background="#000" color="#FFF"
								border="1rpx solid #FFF" margin="0 10rpx 0 0">放大微调</x-card>
						</view>
					</view>

				</scroll-view>

			</view>
			<view class="" style="color: #000;background: #FFF; padding: 40rpx;">
				<view class="bgfff align-center p-20 mb30" style="border: 1rpx solid #000;">
					{{type==1?'姓名':'宠物名'}}:
					<input type="text" placeholder="输入姓名" v-model="name" />
				</view>
				<view class="bgfff align-center  p-20 " style="border: 1rpx solid #000;">
					<view class="">
						生平简介:
					</view>
					<textarea @blur="bindTextAreaBlur" placeholder="输入简介" v-model="desc" auto-height />
				</view>
				<view class="">
					上传照片:请联系我
				</view>
			</view>
			<x-card fontSize="30rpx" background="#000" color="#FFF" border="none" padd="50rpx 0 0"
				@tap="$emit('close')">点击这里返回</x-card>
			<view class="" style="height: 250rpx;">
			</view>
		</view>
		<view class="dialog" v-if="isdialog" style="width: 100vw;">
			<view class="dialog-box">
				<image style="width: 100vw;" :src="`/grave/static/${img}.jpeg`" mode="widthFix"></image>
				<view class="dialog-box-p"
					:style="{top:top+'%',left:left+'%',fontSize:fontSzie+'rpx',width:fontSzie+'rpx'}">
					{{name}} 之墓
				</view>
			</view>
		</view>
		<view class="dialog-g" v-if="isdialog">
			<view class="" style="position: absolute;bottom: 50rpx;left: 0; width: 100vw;">
				<zui-joystick v-if="ytn" @change="onJoyChange" @direction="onDirectionChange" />
				<view class="" v-if="!ytn">
					<slider :value="top" @change="sliderChangeT" step="1" min="0" max="100" />上下
					<slider :value="left" @change="sliderChangeL" step="1" min="0" max="100" />左右
				</view>
				<view class="" @tap="ytn=!ytn">
					<x-card fontSize="30rpx" background="#000" color="#FFF"
						border="1rpx solid #FFF">点击切换:{{!ytn?'摇杆模式':'进度条模式'}} </x-card>
				</view>
				<view class="">
					<x-card fontSize="30rpx" background="#000" color="#FFF" border="none">字体大小 </x-card>
					<slider :value="fontSzie" @change="sliderChangeF" step="1" min="20" max="200" />
				</view>
				<view class="justify-around">
					<x-card fontSize="30rpx" background="#000" color="#FFF" border="1rpx solid #FFF" @tap="step">下一步
						选择埋点</x-card>
					<x-card fontSize="30rpx" background="#000" color="#FFF" border="1rpx solid #FFF"
						@tap="isdialog=!isdialog">关闭 </x-card>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	// #ifdef VUE3
	import {
		getCurrentInstance
	} from 'vue'
	// #endif
	export default {
		data() {
			return {
				img: '',
				type: 1,
				ytn: true,
				name: '张三',
				desc: '生而伟大',
				top: 50,
				fontSzie: 50,
				isdialog: false,
				left: 50,
				cardList: [],
				yTimer: null
			}
		},
		computed: {
			calculateHeight() {
				const {
					globalProperties: global
				} = getCurrentInstance().appContext.config;
				return `calc(${global.statusBarHeight}px)`;
				// // #ifdef VUE2
				// return `${this.statusHeight}px + ${this.height}rpx`;
				// // #endif
			},
		},
		methods: {
			step() {
				let data = {
					name: this.name,
					desc: this.desc,
					top: this.top,
					left: this.left,
					fontSzie: this.fontSzie,
					img: this.img
				}
				uni.setStorageSync('die_info', data)
				this.goMap()
			},
			// 点击调起地图选择位置
			goMap() {
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						uni.setStorageSync('die_info_location', res)
						uni.showToast({
							title: '已经埋好啦',
							icon: 'none'
						})
					},
					fail(err) {
						console.log('错误',err);
					}
				});
				// uni.authorize({
				// 	scope: 'scope.userLocation',
				// 	success(res) {
				// 		console.log('调用地图');
					
				// 	},
				// 	fail(err) {

				// 	}
				// })
			},

			setText(e) {
				this.img = e
				this.isdialog = true
			},
			onJoyChange(e) {
				console.log('onJoyChange', e);
			},
			sliderChangeT(e) {
				console.log('改变', e);
				this.top = e.detail.value
			},
			sliderChangeL(e) {
				this.left = e.detail.value
			},
			sliderChangeF(e) {
				this.fontSzie = e.detail.value
			},
			onDirectionChange(e) {
				// 'none' | 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left' | 'top-left'
				if (e.from != 'none') {
					clearInterval(this.yTimer)
					this.yTimer = setInterval(() => {
						if (e.direction == 'left') {
							this.left -= 1
						} else if (e.direction == 'right') {
							this.left += 1
						} else if (e.direction == 'top') {
							this.top -= 1
						} else if (e.direction == 'bottom') {
							this.top += 1
						} else if (e.direction == 'top-right') {
							this.top -= 1
							this.left += 1
						} else if (e.direction == 'top-left') {
							this.top -= 1
							this.left -= 1
						} else if (e.direction == 'bottom-left') {
							this.top += 1
							this.left -= 1
						} else if (e.direction == 'bottom-right') {
							this.top += 1
							this.left += 1
						}
						if (this.top < 0) {
							this.top = 0
						}
						if (this.left < 0) {
							this.left = 0
						}
						if (this.left > 100) {
							this.left = 100
						}
						if (this.top > 100) {
							this.top = 100
						}
					}, 100)

				} else {
					clearInterval(this.yTimer)
				}
				console.log('onDirectionChange', e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../com/com.css';

	.dialog-g {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 999;
	}

	.dialog {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 9;

		.dialog-box {
			position: relative;

			.dialog-box-p {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%, -50%);
				font-size: 50rpx;
				font-weight: 800;
				color: #000;
				width: 50rpx;
			}
		}
	}

	.rule-page {
		background: rgba(0, 0, 0, 0.85);
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 99999;
	}

	.box {
		width: 350rpx;
		border-radius: 30rpx;
		overflow: hidden;

		.box-item {
			border: 1rpx solid #FFF;
			border-radius: 20rpx;
			width: 300rpx;
			background: #ffffff;
			overflow: hidden;

			image {
				width: 100%;
			}

			.tombstone {
				position: relative;

				.tomb {
					position: absolute;
					width: 20rpx;
					font-size: 20rpx;
					color: #000;
					font-weight: 800;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}
	}
</style>